Angular অ্যাপ্লিকেশনগুলিতে রাউটিং ব্যবস্থাপনা করতে RouterModule এবং Route Configuration ব্যবহার করা হয়। এই ডিরেক্টিভ এবং কনফিগারেশনগুলো Angular অ্যাপ্লিকেশনকে একাধিক পেজ বা ভিউতে নেভিগেট করতে সহায়ক হয়, এবং Single Page Application (SPA) এর কাঠামোকে সহজ করে তোলে।

RouterModule

Angular-এর RouterModule একটি মডিউল, যা অ্যাপ্লিকেশনকে রাউটিং কনফিগারেশনের সাথে সংযোগ করতে সাহায্য করে। এর মাধ্যমে বিভিন্ন রুট এবং সেগুলোর কম্পোনেন্ট ম্যাপিং করা যায়, যেগুলি ব্যবহারকারী URL অনুযায়ী অ্যাক্সেস করতে পারে। RouterModule সাধারণত AppRoutingModule-এ অন্তর্ভুক্ত করা হয় এবং তারপর এটি AppModule-এ ইম্পোর্ট করা হয়।

Route Configuration

Route Configuration হলো সেই পদ্ধতি যেখানে আপনি URL এবং কম্পোনেন্টের মধ্যে সম্পর্ক নির্ধারণ করেন। এতে রাউটের URL পাথ এবং সংশ্লিষ্ট কম্পোনেন্টের ম্যাপিং করা হয়। Angular রাউটারের সাহায্যে URL পরিবর্তনের উপর ভিত্তি করে নির্দিষ্ট কম্পোনেন্টগুলো লোড করা হয়।

Route Configuration উদাহরণ

প্রথমে AppRoutingModule তৈরি করতে হবে, যেখানে রাউট কনফিগার করা হবে। Angular CLI ব্যবহার করে এই মডিউলটি তৈরি করা যেতে পারে:

ng generate module app-routing --flat --module=app

এখন, app-routing.module.ts ফাইলে রাউট কনফিগারেশন সংজ্ঞায়িত করা হবে:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent },  // Default Route
  { path: 'about', component: AboutComponent }, // About Page Route
  { path: '**', component: NotFoundComponent } // Wildcard Route (404)
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে:

• path: '' হল ডিফল্ট রুট, যা প্রথমে লোড হবে, সাধারণত হোম পেজ।
• path: 'about' ইউআরএল /about কে AboutComponent কম্পোনেন্টের সাথে ম্যাপ করে।
• path: '**' একটি wildcard রাউট যা যেকোন অজানা বা অপ্রত্যাশিত রুটের জন্য ব্যবহার করা হয়, যা সাধারণত একটি 404 পেজ হিসেবে ব্যবহৃত হয়।

RouterLink এবং Navigation

Angular অ্যাপ্লিকেশনের মধ্যে পেইজে নেভিগেট করার জন্য RouterLink ডিরেক্টিভ ব্যবহার করা হয়। এর মাধ্যমে, ইউজার যখন একটি লিংক ক্লিক করবে, তখন তা নির্দিষ্ট রুটে নেভিগেট করবে। এটি প্রথাগত HTML <a> ট্যাগের মতো কাজ করে, তবে পেজ রিফ্রেশ না করে অ্যাঙ্গুলারের ভিতরে থাকা নতুন কম্পোনেন্ট লোড করে।

উদাহরণ

1. RouterLink ব্যবহার করা:

<!-- Home Page Link -->
<a routerLink="/">Home</a>

<!-- About Page Link -->
<a routerLink="/about">About</a>

এখানে, routerLink="/" হোম পেজে এবং routerLink="/about" অ্যাবাউট পেজে নেভিগেট করবে।

2. RouterLinkActive ব্যবহার করা:

RouterLinkActive ডিরেক্টিভটি ব্যবহৃত হয় রাউট লিংকটির অ্যাক্টিভ অবস্থার উপর ভিত্তি করে CSS ক্লাস যোগ করতে। এটি সাধারণত লিঙ্কে সিএসএস স্টাইল অ্যাড করার জন্য ব্যবহৃত হয় যখন তা অ্যাক্টিভ থাকে।

<a routerLink="/" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>

এখানে, যখন একটি রুট অ্যাক্টিভ হবে, তখন active ক্লাসটি ওই লিঙ্কে যোগ করা হবে।

রাউট নেভিগেশন

Router.navigate() পদ্ধতি ব্যবহার করে প্রোগ্রাম্যাটিকালি রাউট করা যেতে পারে। এটি একটি কম্পোনেন্ট বা সার্ভিস থেকে URL পরিবর্তন করতে ব্যবহৃত হয়।

উদাহরণ

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-nav',
  template: `
    <button (click)="goToHome()">Go to Home</button>
  `
})
export class NavComponent {

  constructor(private router: Router) { }

  goToHome() {
    this.router.navigate(['/']);
  }
}

এখানে, goToHome() মেথডটি Router.navigate() ব্যবহার করে / রুটে নেভিগেট করবে, অর্থাৎ হোম পেজে যাবে।

রাউট প্যারামিটার

Angular রাউটিং এ আপনি ডাইনামিক প্যারামিটার পাঠাতে পারেন। এটি বিভিন্ন ইউজার ইনপুট বা ডেটার উপর ভিত্তি করে রাউট পরিবর্তন করতে সাহায্য করে।

উদাহরণ

// রাউট কনফিগারেশন
const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

// URL: '/user/123'

এখানে, :id প্যারামিটার ব্যবহার করা হয়েছে, যা URL থেকে ডাইনামিকভাবে একটি মান গ্রহণ করবে (যেমন 123)। এই প্যারামিটারটি কম্পোনেন্টে ActivatedRoute ব্যবহার করে অ্যাক্সেস করা যেতে পারে।

প্যারামিটার গ্রহণ করা

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `<h1>User ID: {{ userId }}</h1>`
})
export class UserComponent implements OnInit {
  userId: string | null = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

এখানে, ActivatedRoute ব্যবহার করে URL প্যারামিটার id গ্রহণ করা হচ্ছে এবং তা কম্পোনেন্টে প্রদর্শন করা হচ্ছে।

Conclusion

Angular-এর RouterModule এবং Route Configuration অ্যাপ্লিকেশনে বিভিন্ন পেজ বা ভিউ নেভিগেট করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এগুলি ব্যবহার করে, আপনি URL এর সাথে কম্পোনেন্ট ম্যাপিং করতে পারেন এবং Angular-এর ডায়নামিক রাউটিং ও নেভিগেশন সুবিধা উপভোগ করতে পারেন।